<!--
 * @Description: modal弹窗分享，详情见UI搜索页和购物袋中
 * @Author: acexu 578599619@qq.com
 * @Date: 2024-11-02 10:49:57
 * @LastEditors: acexu 578599619@qq.com
 * @LastEditTime: 2024-12-02 23:22:01
 * @FilePath: /xp-platform-mobile/sheep/components/f-poster-shareModal/f-poster-shareModal.vue
 * @demoPic: 
-->
<template>
	<view class="mask" @tap="onTap">
		<!-- 画报图片 -->
		<img v-if="show" :src="posterFlow" style="height: 844rpx; width: 686rpx" />
		<!-- 用于生成画报的DOM -->
		<view v-if="showDom" @tap.stop class="content" id="posterDiv">
			<view class="top">
				<view style="display: flex; align-items: center">
					<image
						class="avatar"
						:src="userInfo.avatar"
						mode=""
						style="width: 120rpx; height: 120rpx; border-radius: 60rpx"
					></image>
					<view class="desc">
						<view class="nick-name">{{ userInfo.name }}</view>
						<view class="num"> 分享{{ props.Data.length }}个图稿给你 </view>
					</view>
				</view>
				<image
					:src="qrCode"
					mode=""
					style="width: 160rpx; height: 160rpx; border-radius: 16rpx"
				></image>
			</view>
			<view class="mid">
				<f-share-card
					v-for="item in props.Data.slice(0, 2)"
					:key="item"
					:showInfo="item"
					:showCart="false"
				/>
				<view class="scan-more">扫码查看更多～</view>
			</view>
		</view>
		<!-- 操作按钮组 -->
		<view class="footer" @tap.stop>
			<b-button
				v-if="!show"
				style="width: 310rpx; height: 88rpx; border-radius: 60rpx"
				@click="onShareByCopyLink"
				>复制链接</b-button
			>
			<b-button
				v-else
				style="width: 310rpx; height: 88rpx; border-radius: 60rpx"
				@click="cancelSave"
				>取消</b-button
			>
			<b-button
				v-if="!show && is_WxBrowser"
				type="primary"
				style="width: 310rpx; height: 88rpx; border-radius: 60rpx"
				@tap="generatePoster"
				>生成画报</b-button
			>
			<b-button
				v-if="(show && is_WxBrowser) || (!show && !is_WxBrowser)"
				type="primary"
				style="width: 310rpx; height: 88rpx; border-radius: 60rpx"
				@tap="savePoster"
				>保存画报</b-button
			>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import html2canvas from 'html2canvas';
	import sheep from '@/sheep';
	import { isWxBrowser } from '@/sheep/helper/utils';

	const emit = defineEmits(['cancel']);
	const props = defineProps({
		Data: {
			type: Array,
			default: () => [],
		},
		qrCode: {
			type: String,
			default: '',
		},
		shareCode: {
			type: String,
			default: '',
		},
	});

	const userInfo = computed(() => sheep.$store('user').userInfo);
	const is_WxBrowser = computed(() => isWxBrowser());
	const posterFlow = ref('');
	const show = ref(false);
	const showDom = ref(true);
	const posterDiv = ref();
	const posterFinished = ref(false);

	/**
	 * 复制链接
	 */
	const onShareByCopyLink = () => {
		const { baseUrl } = sheep.$helper.getCurrentPagePath();
		const currentPageUrl = baseUrl + `/#/pages/index/sharing?no=${props.shareCode}`;
		sheep.$helper.copyText(currentPageUrl);
		cancelSave();
	};
	/**
	 * 微信浏览器中生成画报
	 */
	const generatePoster = async () => {
		uni.showLoading({
			title: '画报生成中...',
			mask: false,
		});
		await drawPoster();
		posterFinished.value = true;
	};
	/**
	 * 保存画报
	 */
	const savePoster = async () => {
		if (is_WxBrowser.value && posterFinished.value) {
			sheep.$helper.toast('长按图片保存');
		} else {
			uni.showLoading({
				title: '保存中...',
				mask: false,
			});
			await drawPoster();
		}
	};
	/**
	 * 海报绘制、下载
	 */
	const drawPoster = () => {
		new Promise((resolve, reject) => {
			try {
				posterDiv.value = document.getElementById('posterDiv');
				html2canvas(posterDiv.value, {
					backgroundColor: 'transparent',
					scale: 3,
					allowTaint: true,
					useCORS: true,
				}).then((canvas) => {
					posterFlow.value = canvas.toDataURL('image/png');
					if (is_WxBrowser.value) {
						showDom.value = false;
						setTimeout(() => {
							show.value = true;
						}, 200);
					} else {
						downloadPoster(posterFlow.value);
					}
					resolve(true);
					uni.hideLoading();
				});
			} catch {
				reject('绘制失败');
				uni.hideLoading();
			}
		});
	};
	/**
	 * 弹窗点击事件
	 */
	const onTap = (e) => {
		emit('cancel'); //点击遮罩层关闭弹窗
	};
	/**
	 * 下载操作
	 */
	const downloadPoster = (posterFlow) => {
		if (posterFlow) {
			const aLink = document.createElement('a');
			aLink.style.display = 'none';
			aLink.href = posterFlow; // base64Url就是你要下载的base64格式图片代码
			aLink.download = 'poster.jpg';
			document.body.appendChild(aLink);
			aLink.click(); // 模拟点击
			document.body.removeChild(aLink); //移除节点
			sheep.$helper.toast('保存图片成功');
			emit('cancel');
		}
	};
	// 关闭弹窗
	const cancelSave = () => {
		emit('cancel');
	};
</script>

<style lang="scss" scoped>
	.mask {
		opacity: 1;
		position: fixed;
		z-index: 9;
		inset: 0px;
		background-color: rgba(0, 0, 0, 0.4);
		transition: opacity 300ms, -webkit-transform 300ms, transform 500ms;
		transform-origin: 50% 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.content {
			height: 844rpx;
			width: 686rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			box-sizing: border-box;
			background: linear-gradient(180deg, #f5e1c1 0%, rgba(255, 255, 255, 1) 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			// opacity: 0;

			.top {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 24rpx 0 24rpx;

				.desc {
					padding-left: 16rpx;
					.nick-name {
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
					}

					.num {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.mid {
				.scan-more {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					text-align: center;
					padding-bottom: 24rpx;
				}
			}
		}

		.footer {
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;
			width: 750rpx;
		}
	}
</style>
